<template>
  <div class = "switch">
    <ul class="switch-group">
      <li class="switch-item"
          :class="{'active': currentIndex === i}"
          v-for="(option,i) in switches" :key="i" @click="choose(i,option.val)">
        {{ option.name }}
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        props: {
            switches: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data(){
            return {
                currentIndex: 0
            }
        },
        methods: {
            choose(index,name){
                this.currentIndex = index
                this.$emit('choose',name)
            }
        }
    }
</script>

<style scoped lang = "stylus">
  @import "~common/stylus/variable"
  .switch
    .switch-group
      display flex
      justify-content center
      align-items center
      .switch-item
        color $color-text-l
        font-size $font-size-large
        padding 8px 2rem
        background $color-background-d
        border 1px solid $color-text-l
        &.active
          background $color-highlight-background
          color $color-text
</style>
